<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import CheckSquare from '../components/an-icon/CheckSquare.vue';
import FileText from '../components/an-icon/FileText.vue';
import Edit from '../components/an-icon/Edit.vue';
import User from '../components/an-icon/User.vue';
import Bell from '../components/an-icon/Bell.vue';
import Lock from '../components/an-icon/Lock.vue';
import InfoCircle from '../components/an-icon/InfoCircle.vue';

const router = useRouter();

// 用户信息
const userInfo = ref({
  name: '张明',
  position: '技术部总监',
  avatar: null
});

// 菜单选项
const menuSections = [
  {
    title: '我的审批',
    items: [
      {
        id: 'approved_by_me',
        title: '我已审批',
        icon: 'check-square',
        badge: null
      },
      {
        id: 'my_copy',
        title: '抄送我的',
        icon: 'file-text',
        badge: 5
      },
      {
        id: 'draft',
        title: '草稿箱',
        icon: 'edit',
        badge: 2
      }
    ]
  },
  {
    title: '系统设置',
    items: [
      {
        id: 'profile',
        title: '个人资料',
        icon: 'user',
        badge: null
      },
      {
        id: 'notification',
        title: '通知设置',
        icon: 'bell',
        badge: null
      },
      {
        id: 'security',
        title: '安全设置',
        icon: 'lock',
        badge: null
      },
      {
        id: 'about',
        title: '关于我们',
        icon: 'info-circle',
        badge: null
      }
    ]
  }
];

// 版本信息
const appVersion = 'v1.0.0';

// 处理菜单项点击
const handleMenuClick = (menuId: string) => {
  switch (menuId) {
    case 'approved_by_me':
      router.push('/approved-by-me');
      break;
    case 'my_copy':
      router.push('/my-copy');
      break;
    case 'draft':
      router.push('/draft');
      break;
    case 'profile':
      router.push('/profile');
      break;
    case 'notification':
      router.push('/notification-settings');
      break;
    case 'security':
      router.push('/security-settings');
      break;
    case 'about':
      router.push('/about');
      break;
    default:
      console.log(`未知菜单项: ${menuId}`);
  }
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('isAuthenticated');
  router.push('/login');
};
</script>

<template>
  <div class="user-center-container">
    <!-- 用户信息区域 -->
    <div class="user-info-section">
      <div class="user-avatar-container">
        <div v-if="userInfo.avatar" class="user-avatar" :style="{ backgroundImage: `url(${userInfo.avatar})` }"></div>
        <div v-else class="user-avatar placeholder">
          {{ userInfo.name.substring(0, 1) }}
        </div>
      </div>
      <div class="user-details">
        <h2 class="user-name">{{ userInfo.name }}</h2>
        <p class="user-position">{{ userInfo.position }}</p>
      </div>
      <button class="edit-profile-button" @click="handleMenuClick('profile')">
        <Edit />
      </button>
    </div>

    <!-- 菜单区域 -->
    <div class="menu-section">
      <div v-for="(section, sectionIndex) in menuSections" :key="sectionIndex" class="menu-group">
        <h3 class="menu-section-title">{{ section.title }}</h3>
        <div class="menu-items">
          <button
            v-for="menu in section.items"
            :key="menu.id"
            class="menu-item"
            @click="handleMenuClick(menu.id)"
          >
            <div class="menu-icon">
              <CheckSquare v-if="menu.icon === 'check-square'" />
              <FileText v-else-if="menu.icon === 'file-text'" />
              <Edit v-else-if="menu.icon === 'edit'" />
              <User v-else-if="menu.icon === 'user'" />
              <Bell v-else-if="menu.icon === 'bell'" />
              <Lock v-else-if="menu.icon === 'lock'" />
              <InfoCircle v-else-if="menu.icon === 'info-circle'" />
            </div>
            <span class="menu-title">{{ menu.title }}</span>
            <div class="menu-right">
              <span v-if="menu.badge" class="menu-badge">{{ menu.badge }}</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <button class="logout-button" @click="handleLogout">
        退出登录
      </button>
    </div>

    <!-- 版本信息 -->
    <div class="version-section">
      <span class="version-text">流批通 {{ appVersion }}</span>
    </div>
  </div>
</template>

<style scoped>
.user-center-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.user-info-section {
  display: flex;
  align-items: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #969FFF, #5147FF);
  color: white;
}

.user-avatar-container {
  margin-right: 16px;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.2);
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.user-position {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

.edit-profile-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.edit-profile-button:hover {
  opacity: 1;
}

.menu-section {
  flex: 1;
  padding: 16px;
}

.menu-group {
  margin-bottom: 24px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.menu-section-title {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  padding: 12px 16px;
  margin: 0;
  border-bottom: 1px solid #F3F4F6;
}

.menu-items {
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #F9FAFB;
}

.menu-item:not(:last-child) {
  border-bottom: 1px solid #F3F4F6;
}

.menu-icon {
  margin-right: 12px;
  color: #6B7280;
}

.menu-title {
  flex: 1;
  font-size: 16px;
  color: #1F2937;
}

.menu-right {
  display: flex;
  align-items: center;
}

.menu-badge {
  background-color: #EF4444;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 8px;
  min-width: 20px;
  text-align: center;
}

.logout-section {
  padding: 16px;
}

.logout-button {
  width: 100%;
  padding: 14px;
  background-color: white;
  border: 1px solid #EF4444;
  border-radius: 8px;
  color: #EF4444;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-button:hover {
  background-color: #FEF2F2;
}

.version-section {
  padding: 16px;
  text-align: center;
}

.version-text {
  font-size: 13px;
  color: #9CA3AF;
}
</style>